<template>
  <div class="container">
    <el-dialog :title="`${showText}用户`" :visible="showDialog" @close="btnCancel">
      <!-- 表单 -->
      <el-form ref="compForm" :model="formData" :rules="rules" label-width="150px" style="width: 80%">
        <el-form-item label="企业名称" prop="shortName">
          <el-input v-model="formData.shortName" style="width:100%" />
        </el-form-item>
        <el-form-item label="所属公司" prop="company">
          <el-input v-model="formData.company" style="width:100%" />
          <p class="tyc">https://www.tianyancha.com （在此可查询所属公司全称及简称）</p>
        </el-form-item>
        <!-- 市 -->
        <el-form-item label="城市地区">
          <el-row>
            <el-col :span="11" class="leftCol">
              <el-form-item prop="province">
                <el-select v-model="formData.province" placeholder="请选择" class="option" style="width:100%" @change="onchange">
                  <el-option v-for="item in cityProper" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
            <!-- 区 -->
            <el-col :span="11">
              <el-form-item prop="city">
                <el-select v-model="formData.city" placeholder="请选择" style="width:100%">
                  <el-option v-for="item in county" :key="item" :label="item" :value="item" />
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form-item>

        <el-form-item label="方向（企业标签）" prop="tags">
          <el-input v-model="formData.tags" style="width:100%" />
        </el-form-item>
        <el-form-item label="备注" prop="remarks">
          <el-input v-model="formData.remarks" type="textarea" style="width:100%" placeholder="请输入" />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="btnOk">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { add, detail, update } from '@/api/hmmm/companys'
import { provinces, citys } from '@/api/hmmm/citys'
export default {
  props: {
    showDialog: {
      type: Boolean,
      required: true,
      default: false
    }
  },
  data() {
    return {
      cityProper: [],
      county: [],
      list: [],
      formData: {
        shortName: '', // 企业名称
        company: '', // 所属公司
        province: '', // 北京市
        city: '', // 朝阳区
        tags: '', // 方向（企业标签）
        remarks: '', // 备注
        isFamous: true
      },
      rules: {
        shortName: [{ required: true, message: '企业简称不能为空', trigger: 'blur' }],
        company: [{ required: true, message: '所属公司不能为空', trigger: 'blur' }],
        province: [{ required: true, message: '请选择省份', trigger: 'blur' }],
        city: [{ required: true, message: ' ', trigger: 'blur' }],
        tags: [{ required: true, message: '请请输标签', trigger: 'blur' }],
        remarks: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
      },
      message: ''
    }
  },
  computed: {
    showText() {
      return this.formData.id ? '编辑' : '创建'
    }
  },
  created() {
    const cityProper = provinces()
    this.cityProper = cityProper
  },
  methods: {
    btnOk() {
      this.$refs.compForm.validate().then(async() => {
        if (this.formData.id) {
        //   编辑
          console.log(this.formData.id)
          this.formData.isFamous = true
          await update(this.formData)
        } else {
          await add(this.formData)
        }
        // 关闭弹窗
        this.$emit('update:showDialog', false)
        // 更新列表
        this.$emit('updateList')
      }).catch((err) => {
        console.log(err)
      })
    },
    onchange(city) {
      const county = citys(city)
      this.county = county
      this.formData.city = county[0]
    },
    btnCancel() {
      this.formData = {
        shortName: '', // 企业名称
        company: '', // 所属公司
        province: '', // 北京市
        city: '', // 朝阳区
        tags: '', // 方向（企业标签）
        remarks: '', // 备注
        isFamous: true
      }
      this.$refs.compForm.resetFields()
      this.$emit('update:showDialog', false)
    },
    async detailsCompany(id) {
      const { data } = await detail({ id })
      this.formData = data
    }
  }
}
</script>

<style lang="scss" scoped>
.option {
    margin-right: 15px;
}
.tyc{
    margin-bottom: 0;
}
.leftCol {
    margin-right: 10px;
}
</style>
